<template>
	<view class="content">
		<view class="head-box" v-if="userInfo">
			<view class="head-username">
				<image :src="defaultHead" class="head-image"></image>
				<view class="head-username-text">{{userInfo.username}}</view>
			</view>
			<view class="head-collect">
				<view @tap="toSwitchTab('../bookrack/bookrack')" class="head-collect-left">收藏：{{collect}}本书</view>
				<button @tap="toSwitchTab('../book-mall/book-mall')" class="head-collect-right">
					添 加
				</button>
			</view>
		</view>
		
		<view class="head-box" v-if="Boolean(userInfo)==false">
			<view class="head-login">
				<view class="head-login-text">请先登录</view>
				<view class="head-login-readinfo">阅读进度丶账号信息跨设备同步</view>

				<button class="head-login-btn" @tap="$toast(loginUrl)">马上登录</button>
				
				<!-- <view class="head-login-collect">收藏：登录后查看</view> -->
			</view>
		</view>

		<view style="width: 100%;height: 300rpx;padding-left: 25rpx;padding-right: 25rpx;margin-top: 30rpx;">
			<view class="user-btn-box"  @tap="toNavigate('../history/history')">
				<view class="user-btn-left">浏览历史</view>
				<view class="user-btn-right">
					>
				</view>
			</view>
			<view class="line"></view>
			<view class="user-btn-box">
				<view class="user-btn-left">帮助中心</view>
				<view class="user-btn-right">
					>
				</view>
			</view>
			<view class="line"></view>
			<view class="user-btn-box">
				<view class="user-btn-left">反馈问题</view>
				<view class="user-btn-right">
					>
				</view>
			</view>
			<view class="line"></view>
			<view v-if="userInfo" class="user-btn-box" @tap="quitLogin()">
				<view class="user-btn-left">退出登录</view>
				<view class="user-btn-right">
					>
				</view>
			</view>
			<view class="line"></view>
			
		</view>
	</view>
</template>

<script>
	import { getStore } from "../../store/store.js"	
	export default {
		data() {
			return {
				userInfo: false,
				collect: 0,
				defaultHead: "../../static/mine/user.png",
				// #ifdef H5
				loginUrl: `../login/login`,
				// #endif
				// #ifdef MP-WEIXIN
				loginUrl: `../login/wxLogin`,
				// #endif
			}
		},
		onShow() {
			this.userInfo = getStore("userInfo")
			this.collect = getStore("Collect").length
		},
		methods: {
			
			quitLogin(){
				uni.clearStorageSync()
				this.userInfo = getStore("userInfo")
				// location.reload()
			},
			toSwitchTab(url){
				uni.switchTab({
					url:url
				})
			},
			toNavigate(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.line{
	    bottom: 0;
	    height: 1px;
		/* margin-top: 20rpx; */
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
		opacity: 0.6;
	}
	
	.head-username {
		height: 60%;
		padding: 5rpx 5rpx 5rpx 5rpx;
	}

	.head-box {
		width: 100%;
		height: 300rpx;
		padding-left: 25rpx;
		padding-right: 25rpx;
		background-color: #0B0C21;
		border-top-right-radius: 2em;
		border-top-left-radius: 2em;
	}

	.head-image {
		float: left;
		width: 100rpx;
		height: 100rpx;
		margin-top: 5%;
		display: inline-block;
		border-radius: 100px;
	}

	.head-username-text {
		display: inline-block;
		font-size: 35rpx;
		font-weight: 600;
		color: #a1a3a6;
		line-height: 100rpx;
		margin-top: 5%;
		margin-left: 2%;
	}
	.head-collect{
		border: 1px solid #a1a3a6;
		width: 100%;
		height: 38%;
		border-radius: 6px;
		padding: 5rpx 20rpx 5rpx 20rpx;
	}
	.head-collect-left{
		line-height: 100rpx;
		color: #a1a3a6;
		float: left;
	}
	.head-collect-right{
		color: #F1F1F1;
		float: right;
		font-size: 15px;
		background-color: #007AFF;
		line-height: 50rpx;
		height: 50rpx;
		width: 100rpx;
		margin-top: 3.8%;
	}
	.user-btn-box {
		/* border-bottom: 1px solid #a1a3a6; */
		width: 100%;
		height: 38%;
		border-radius: 6px;
		padding: 5rpx 5rpx 5rpx 5rpx;
	}
	.head-login-text{
		font-size: 30rpx;
		margin-top: 38rpx;
	}
	
	.head-login-readinfo{
		color: #C8C7CC;
		margin-top: 35rpx;
	}
	.head-login-btn{
		border-radius: 50px;
		margin-top: 35rpx;
		width: 85%;
		margin-left: 7.5%;
		background-color: #007AFF;
		height: 70rpx;
		line-height: 70rpx;
	}
	.user-btn-left {
		line-height: 100rpx;
		color: #a1a3a6;
		float: left;
	}
	.head-login{
		text-align: center;
		padding: 20rpx 0rpx 20rpx 0rpx;
	}
	.head-login-collect{
		float: left;
		margin-top: 50rpx;
		color: #C8C7CC;
	}
	.user-btn-right {
		color: #696A7F;
		float: right;
		font-size: 16px;
		line-height: 50rpx;
		margin-top: 1.8%;
	}
</style>
